<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>宽度可伸缩的水平菜单栏</title>
    <script  type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
        .align {
            list-style: none;
            border-bottom:5px solid #F60;
            padding-left:30px;
            height:50px;
        }
        .align li{
            float:left;
            margin-top:20px;
            margin-right:1px;
        }
        .align a{
            width:120px;
            height:30px;
            display:block;
            line-height: 30px;
            text-align:center;
            text-decoration:none;
            background:#ccc;
            margin-bottom:1px;
            margin-left:1px;
            border-radius:5px 5px 0 0;
        }
       .align a:hover,a.on{
            background:#F60;
            color:#fff;
            height:40px;
            line-height:40px;
            margin-top:-5px;
            -webkit-box-shadow: 3px 3px 3px;  
            -moz-box-shadow: 3px 3px 3px;  
            box-shadow: 3px 3px 3px;  
        }
    </style>
    <script>
        /*可伸缩水平菜单栏重点 靠控制高度height:40px; margin-top:-5px; 再文字居中line-height:40px;
        border-radius:5px 5px 0 0;圆角
        添加阴影效果
        -webkit-box-shadow: 3px 3px 3px;  
        -moz-box-shadow: 3px 3px 3px;  
        box-shadow: 3px 3px 3px;  
        */
        /* js写法
        window.onload = function () {
            var a = document.getElementsByTagName("a");
            for (var i = 0; i < a.length;i++){
                a[i].onmouseover = function () {
                    clearInterval(this.time);//清楚防止动画累加
                    var This = this;
                    This.time=setInterval(function () {
                        This.style.width = This.offsetWidth + 8 + "px";
                        if (This.offsetWidth >= 150) {
                            clearInterval(This.time);
                        }
                    },30);
                }

                a[i].onmouseout = function () {
                    clearInterval(this.time);
                    var This = this;
                    This.time = setInterval(function () {
                        This.style.width = This.offsetWidth -8 + "px";
                        if (This.offsetWidth <= 120) {
                            This.style.width = "120px";
                            clearInterval(This.time);
                        }
                    }, 30);
                }
            }
        }
         */
    </script>
    <script  type="text/javascript">
        //简写1、$().ready(function () {} ;简写2、$(function(){  })
        $(document).ready(function () {
            //jq动画刚开始的时候要把 前一个动画停止stop()。用bind事件的方法或者hover都可以实现

            /*
            $(".align li a").bind({
                mouseover: function () {
                    $(this).stop().animate({ "width": "150px" }, 200);
                    //效果等价于
                    //$(this).stop();
                    //$(this).animate({ "width": "150px" }, 200);
                },
                mouseout: function () {
                    $(this).stop().animate({ "width": "120px" }, 200);
                },
            });
            */
            $(".align li a").hover(
                function () {
                    $(this).stop().animate({ "width": "150px" }, 200);
                },
                function () {
                    $(this).stop().animate({ "width": "120px" }, 200);
                }
            );
        })
        
    </script>
</head>
<body>
    <ul class="align">
        <li><a class="on" href="#">首    页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">服务支持</a></li>
    </ul>
</body>
</html>
